<template>
    <van-swipe @change="onChange" :touchable="false" ref="swipe" :loop="false">
        <van-swipe-item v-for="(item, index) in options.formList">
            <div class="qa-swipe-view">
                <img
                    class="bg_img"
                    :src="options.bg_img"
                />
                <div class="content">
                    <template v-if="item == 1">
                        <div class="title">
                            您是否定制过眉毛？
                        </div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="one">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">是</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">否</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 2">
                        <div class="title">您的年龄区间是？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="two">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">18-30</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">30-45</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="3">45-60</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="3">60+</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 3">
                        <div class="title">您想做什么项目？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="three">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">纹眉</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">纹唇</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="3">美瞳线</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="4">眉眼唇</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="5">淡斑</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 4">
                        <div class="title">您的性别是？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="four">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">女</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">男</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 5">
                        <div class="title">您是想做淡斑吗？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="five">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">是</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">不是</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 6">
                        <div class="title">您的色斑类型？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="six">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">雀斑</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">晒斑</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="3">老年斑</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="4">其他色斑</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 7">
                        <div class="title">您长斑的部位？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="seven">
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">眼角</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">额头</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="3">脸颊</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="4">其他部位</van-radio>
                        </van-radio-group>
                    </template>
                    <template v-if="item == 8">
                        <div class="title">您预计到店时间？</div>
                        <van-radio-group class="radio-group" direction="horizontal" v-model="eight">  
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="1">7天内</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="2">7-14天</van-radio>
                            <van-radio :icon-size="iconSize" class="radio-option" @click="radioClick" name="3">14天后</van-radio>
                        </van-radio-group>
                    </template>
                </div>
            </div>
        </van-swipe-item>
    </van-swipe>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/swipe/style'
import 'vant/lib/swipe-item/style'

export default {
    name: "qa-swipe-view",
    props: {
		view: {
			type: Object,
			default: () => ({}),
		},
	},
    computed: {
        options() {
			return this.view.options
		},
    },
    data () {
        return {
            current: 0,
            iconSize: "35px",
            one: '0',
            two: '0',
            three: '0',
            four: '0',
            five: '0',
            six: '0',
            seven: '0',
            eight: '0',
        }
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
        radioClick(event) {
            if (this.current == this.options.formList.length - 1) {
                this.skipAdMp(this.options);
            }
            this.$refs.swipe.next()
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: absolute;
    top: 35%;
    width: 100%;
    font-size: 24px;
}
.title {
    text-align: center;
    margin-bottom: 40px;
    color: red;
    font-size: 35px;
}
.radio-group {
    display: flex;
    flex-direction: column;
    font-size: 35px;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
}
.radio-option {
    margin-bottom: 20px;
}
</style>